<app-header />

<main>
  <ul id="users">
    @for (user of users; track user.id) {
    <li>
      <app-user
        [user]="user"
        [selected]="user.id === selectedUserId"
        (select)="onSelectUser($event)"
      />
    </li>
    }
  </ul>

  @if (selectedUser) {
  <app-tasks [userId]="selectedUser.id" [name]="selectedUser.name" />
  } @else {
  <p id="fallback">Select a user to see their tasks!</p>
  }
</main>
